<!doctype html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SB共享单车</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/app.css">
</head>

<body data-type="generalComponents">

<header class="am-topbar am-topbar-inverse admin-header">
    <div class="am-topbar-brand">
        <a href="javascript:;" class="tpl-logo">
            <img src="assets/img/logo.png" alt="">
        </a>
    </div>
    <div class="am-icon-list tpl-header-nav-hover-ico am-fl am-margin-right">

    </div>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
            data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span
            class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">

            <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                    <span class="tpl-header-list-user-nick" id="userName">none</span><span
                        class="tpl-header-list-user-ico"> <img src="assets/img/user01.png"></span>
                </a>
            </li>
            <li><a id = "quit" class="tpl-header-list-link"><span
                    class="am-icon-sign-out tpl-header-list-ico-out-size"></span></a></li>
        </ul>
    </div>
</header>

<div class="tpl-page-container tpl-page-header-fixed">

    <div class="tpl-left-nav tpl-left-nav-hover">
        <div class="tpl-left-nav-title" style="font-size: 16px;margin-bottom: 15px;margin-top: -10px;">
            ShareBike
        </div>
        <div class="tpl-left-nav-list">
            <ul class="tpl-left-nav-menu">
                <li class="tpl-left-nav-item">
                    <a href="UserIndex" class="nav-link">
                        <i class="am-icon-home"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li class="tpl-left-nav-item">
                    <a href="UserUseBike" class="nav-link tpl-left-nav-link-list">
                        <i class="am-icon-car"></i>
                        <span>使用车辆</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                    </a>
                </li>
                <li class="tpl-left-nav-item">
                    <a href="UserAppointBike" class="nav-link tpl-left-nav-link-list">
                        <i class="am-icon-bell"></i>
                        <span>预约车辆</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                    </a>
                </li>
                <li class="tpl-left-nav-item">
                    <a href="UserRechare" class="nav-link tpl-left-nav-link-list">
                        <i class="am-icon-money"></i>
                        <span>充值</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                    </a>
                </li>
                <li class="tpl-left-nav-item">
                    <a href="UserInfo" class="nav-link tpl-left-nav-link-list active">
                        <i class="am-icon-child"></i>
                        <span>查看个人信息</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            查看个人信息
        </div>
        <ol class="am-breadcrumb">
            <li><a href="UserIndex" class="am-icon-home">首页</a></li>
            <li><a href="#">查看个人信息</a></li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code">个人信息</span>
                </div>
            </div>
            <div class="tpl-block">
                <div class="am-g">
                    <div class="am-u-lg-offset-1 am-u-lg-2">
                        <h3>用户编号: [[${session.user.userId}]]</h3>
                    </div>
                    <div class="am-u-lg-3">
                        <h3>用户名称： [[${session.user.userName}]]</h3>
                    </div>
                    <div class="am-u-lg-3">
                        <h3>用户手机号：[[${session.user.phone}]]</h3>
                    </div>
                    <div class="am-u-lg-2 am-u-end">
                        <h3>账户余额： [[${session.user.balance}]] 元</h3>
                    </div>
                </div>
            </div>
            <h2 style="color: #19a7f0;font-weight: bold">用车记录</h2>
            <div class="am-g" id="useRecordtable">
                <table class="am-table am-table-striped am-table-hover" >
                    <thead>
                    <tr>
                        <th class="am-u-lg-2" style="text-align: center">用车记录编号</th>
                        <th class="am-u-lg-2" style="text-align: center">车辆ID</th>
                        <th class="am-u-lg-3" style="text-align: center">开始使用时间</th>
                        <th class="am-u-lg-3" style="text-align: center">结束使用时间</th>
                        <th class="am-u-lg-2" style="text-align: center">共支付（元）</th>
                    </tr>
                    </thead>
                    <tbody id="useRecordtbody">
                    </tbody>
                </table>
                <div class="am-cf">
                    <div class="am-fr">
                        <ul class="am-pagination tpl-pagination">
                            <li id="shangli1" class="am-disabled"><a href="#" id="shang1">«</a></li>
                            <li id="xiali1" class="am-disabled"><a href="#" id="xia1">»</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <h2 style="color: #19a7f0;font-weight: bold">充值记录</h2>
            <div class="am-g" id="rechRecordtable" style="text-align: center">
                <table class="am-table am-table-striped am-table-hover">
                    <thead>
                    <tr>
                        <th class="am-u-lg-offset-1 am-u-lg-2" style="text-align: center">充值记录编号</th>
                        <th class="am-u-lg-4" style="text-align: center">充值日期</th>
                        <th class="am-u-lg-4 am-u-end" style="text-align: center">充值金额</th>
                    </tr>
                    </thead>
                    <tbody id="rechRecordtbody">
                    </tbody>
                </table>
            </div>
            <div class="am-cf">
                <div class="am-fr">
                    <ul class="am-pagination tpl-pagination">
                        <li id="shangli2" class="am-disabled"><a href="#" id="shang2">«</a></li>
                        <li id="xiali2" class="am-disabled"><a href="#" id="xia2">»</a></li>
                    </ul>
                </div>
            </div>
            <div class="tpl-alert"></div>
        </div>
    </div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="js/my.js" th:inline="javascript"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var user = /*[[${session.user}]]*/ null;
    var usePage = 1;
    var mydata1 = {}
    function loadUseRecords(){
        mydata1.page = usePage
        $.ajax({
            type: "post",
            url: "/user/getUsegeRecord",
            contentType: "application/json;charset=utf-8",
            data:JSON.stringify(mydata1),
            success: function (result) {
                console.log(result)
                if(result.list.isFirstPage){
                    $("#shangli1").addClass("am-disabled")
                }else{
                    $("#shangli1").removeClass("am-disabled")
                }
                if(result.list.isLastPage){
                    $("#xiali1").addClass("am-disabled")
                }else{
                    $("#xiali1").removeClass("am-disabled")
                }
                if(result.code == 101){
                    $("#useRecordtbody").empty();
                    $.each(result.list.list, function (index, data) {
                        $("#useRecordtbody").append(
                            '<tr>' +
                            '<td class="am-u-lg-2" style="text-align: center">' + data.id + '</td>' +
                            '<td class="am-u-lg-2" style="text-align: center">' + data.bikeId + '</td>' +
                            '<td class="am-u-lg-3" style="text-align: center">' + data.borrowDate + '</td>' +
                            '<td class="am-u-lg-3" style="text-align: center">' + data.backDate + '</td>' +
                            '<td class="am-u-lg-2" style="text-align: center">' + data.money + '</td>' +
                            '</tr>'
                        );
                    });
                }else{
                    $("#useRecordtable").empty();
                    $("#useRecordtable").append(
                        '<h1 style="color: darkgray;font-weight: bold">无使用记录</h1>'
                    );
                }
            }
        });
    }
    $("#shang1").click(function () {
        usePage = usePage - 1;
        loadUseRecords();
    });
    $("#xia1").click(function () {
        usePage = usePage + 1;
        loadUseRecords();
    });
    var charegePage = 1;
    var mydata2 = {}
    function loadRechargeRecords(){
        mydata2.page = charegePage
        $.ajax({
            type: "post",
            url: "/user/getRechargeRecord",
            contentType: "application/json;charset=utf-8",
            data:JSON.stringify(mydata2),
            success: function (result) {
                if(result.list.isFirstPage){
                    $("#shangli2").addClass("am-disabled")
                }else{
                    $("#shangli2").removeClass("am-disabled")
                }
                if(result.list.isLastPage){
                    $("#xiali2").addClass("am-disabled")
                }else{
                    $("#xiali2").removeClass("am-disabled")
                }
                if(result.code == 101){
                    $("#rechRecordtbody").empty();
                    $.each(result.list.list, function (index, data) {
                        $("#rechRecordtbody").append(
                            '<tr>' +
                            '<td class="am-u-lg-offset-1 am-u-lg-2" style="text-align: center">' + data.id + '</td>' +
                            '<td class="am-u-lg-4" style="text-align: center">' + data.rechargeDate + '</td>' +
                            '<td class="am-u-lg-4 am-u-end" style="text-align: center">' + data.money + '</td>' +
                            '</tr>'
                        );
                    });
                }else{
                    $("#rechRecordtable").empty();
                    $("#rechRecordtable").append(
                        '<h1 style="color: darkgray;font-weight: bold">无充值记录</h1>'
                    );
                }
            }
        });
    }
    $("#shang2").click(function () {
        charegePage = charegePage - 1;
        loadRechargeRecords();
    });
    $("#xia2").click(function () {
        charegePage = charegePage + 1;
        loadRechargeRecords();
    });
    $(function () {
        if (user == null) {
            alert("请先登录");
            window.location.href = "login"
        } else {
            $('#userName').text(user.userName);
        }
        loadUseRecords()
        loadRechargeRecords()
    })
    /*<![CDATA[*/
</script>

</body>

</html>